<script setup lang="ts">
import {
  Menu,
} from '@element-plus/icons-vue'
import {
  NavigationStorageEnum,
  UserInfoEnum,
} from '@/enum'
import type { ApplicationInfo } from '@/types'

import {
  sysApplicationApi,
  sysApplicationMenuApi,
  sysRoleApplicationApi,
} from '@/api'

const { $message } = useCurrentInstance()
const { setAnimateState } = useLayoutStore()
const { userInfo } = storeToRefs(useUserStore())
const { clearCache } = useKeepPageStore()
const {
  setPermissionRoutes,
  logout,
  clearTrendsRoute,
  setIsSingleApplication,
} = useUserStore()
const router = useRouter()
const [applyList, setApplyList] = useState<
  ApplicationInfo[]
>([])
const [bindApplyId, setBindApplyId] = useState<number[]>(
  [],
)
setAnimateState(true, {
  fullscreen: true,
  showTitle: true,
})

const containerRef = ref<HTMLElement | null>(null)

const bindApply = computed(() => {
  return applyList.value.filter(item =>
    bindApplyId.value.includes(item.id),
  )
})

onMounted(() => {
  init()
})

async function init() {
  const isToken = localStorage.getItem(UserInfoEnum.TOKEN)
  if (!isToken) {
    router.replace('/404')
    return
  }

  // await sleep(3000);
  await getApplyList()
  await getBindApplyId()
}

async function getApplyList() {
  const { data: res } = await sysApplicationApi.queryList()
  setApplyList(res)
}
async function getBindApplyId() {
  const { data: res }
    = await sysRoleApplicationApi.queryBindApplicationId(
      userInfo.value.roleId ?? 0,
    )

  if (res.length > 1) {
    setAnimateState(true, {
      fullscreen: false,
      showTitle: false,
    })
    setBindApplyId(res)
    return
  }

  const apply = applyList.value.find(
    item => item.id === res[0],
  )
  if (!apply || res.length === 0) {
    $message.warning('请联系管理员分配应用后再试！')
    logout()
    return
  }
  setIsSingleApplication(true)
  switchSystem(apply!)
}
async function switchSystem(row: ApplicationInfo) {
  setAnimateState(true, {
    fullscreen: true,
    showTitle: true,
    title: '正在进入系统...',
  })
  // !清除已注册的菜单
  clearTrendsRoute()
  // 清除缓存
  clearCache()
  // 清除存贮的导航菜单信息
  localStorage.removeItem(NavigationStorageEnum.INFO_MAP)
  localStorage.removeItem(NavigationStorageEnum.URL_DATA)

  const { data: res }
    = await sysApplicationMenuApi.queryBindMenuTree({
      applicationId: row.id,
      roleId: userInfo.value.roleId!,
    })

  if (res.length === 0) {
    $message.warning(
      '请联系管理员分配权限，或者切换其他系统！',
    )
    setAnimateState(true, {
      fullscreen: false,
      showTitle: false,
    })
    return
  }
  // ! 注入权限菜单
  setPermissionRoutes(res)
  router.push('/')
}
</script>

<template>
  <div ref="containerRef" class="width-fill height-fill system-navigation relative">
    <div class="align-center system-container box-border flex justify-center">
      <TransitionGroup
        enter-active-class="animate__animated animate__fadeInUp"
        leave-active-class="animate__animated animate__fadeInUp"
      >
        <div
          v-for="(item, i) in bindApply" :key="item.id" class="overflow c-pointer system-item box-border" :style="{
            '--item-index': i,
            '--item-total': bindApply.length,
          }" @click="switchSystem(item)"
        >
          <el-icon>
            <Menu />
          </el-icon>
          <h4 class="width-fill">
            {{ item.applicationName }}
          </h4>
          <p class="width-fill padding-lr-xs text-overflow-hide-3 box-border">
            {{ item.remarks }}
          </p>
          <a href="javascript:void(0);" class="width-fill text-bold goto text-center">
            跳转
          </a>
        </div>
      </TransitionGroup>
      <!-- <div v-if="bindApply.length === 0">请联系管理员分配系统</div> -->
    </div>
    <footer class="width-fill align-center flex gap-xs">
      <img src="@/assets/images/logo.png" alt="" srcset="">
      <span class="margin-0 fs-14 text-bold">
        能耗管理平台
      </span>
    </footer>
    <div class="test absolute" />
  </div>
</template>

<style lang="scss">
html.dark .system-navigation {
  .switch {
    background-color: var(--el-bg-color-overlay);
    box-shadow: 1px 1px 4px inset rgba(255, 255, 255, 0.1),
      1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  footer {
    span {
      color: var(--el-color-white);
    }
  }

  .system-item {
    background-color: var(--el-bg-color-overlay);
    box-shadow: 0 8px 32px #ffffff0d;

    .el-icon,
    h4,
    a,
    p {
      color: var(--el-text-color-primary);
    }

    &:hover::before {
      background-color: var(--el-text-color-primary);
    }
  }
}
</style>

<style lang="scss" scoped>
.switch {
  --switch-w: 100px;
  --switch-h: 40px;
  --switch-gap: 6px;
  --switch-item-h: calc(var(--switch-h) * 0.8);
  --switch-item-w: calc(50% - var(--switch-gap) * 1.5);
  cursor: pointer;
  top: 20px;
  right: 20px;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: 9999px;
  background-color: #fff;
  z-index: 99;
  box-shadow: 1px 1px 4px inset rgba(0, 0, 0, 0.1),
    1px 1px 2px rgba(255, 255, 255, 0.1);

  span .el-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    width: 100%;
    height: inherit;
    transition: all 0.3s;
    background-color: inherit;
    color: #fff;
  }

  span em {
    box-sizing: border-box;
    padding-left: 8px;
    display: block;
    width: 100%;
    font-style: normal;
    font-size: 14px;
    color: #fff;
  }

  span {
    overflow: hidden;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: var(--switch-gap);
    height: var(--switch-item-h);
    line-height: var(--switch-item-h);
    width: var(--switch-item-w);
    transform: translateY(-50%);
    transform-origin: left center;
    border-radius: 999px;
    transition: all 0.3s;
    white-space: nowrap;
    background-color: var(--el-color-success);
  }

  span:last-of-type {
    background-color: var(--el-color-primary);
    left: unset;
    right: var(--switch-gap);
    transform-origin: right center;

    .el-icon {
      right: unset;
      left: 0px;
    }

    em {
      padding-left: unset;
      padding-right: 8px;
    }
  }

  span.active,
  span:not(.active):hover {
    width: calc(100% - var(--switch-gap) * 2);
    z-index: 2;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.1);

    .el-icon,
    em {
      width: var(--switch-item-w);
    }
  }

  span:not(.active):hover {
    z-index: 3;
  }

  &:hover span.active {
    width: var(--switch-item-w);
    box-shadow: none;

    .el-icon {
      width: 100%;
    }
  }
}

//------------------组件样式------------------
footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 24px;
  padding-left: map-get($gapSuffixMap, xl);
  padding-bottom: map-get($gapSuffixMap, sm);

  img {
    height: 100%;
  }

  span {
    color: #101010;
  }
}

.system-container {
  --gap: 30px;
  position: absolute;
  z-index: 9;
  inset: 0;
  top: 40%;
  margin: auto;
  gap: var(--gap);
}

.system-details {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 9;
  pointer-events: none;

  &::before {
    --w: 4px;

    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: var(--w);
    background-image: linear-gradient(to top,
        transparent,
        var(--el-color-primary),
        transparent);
  }
}

.system-item {
  --item-width: 180px;
  --item-height: 300px;
  --item-index: 0;
  --item-total: 0;
  // after
  --n: calc(var(--item-width) * 0.6);
  position: relative;
  width: var(--item-width);
  height: var(--item-height);
  border-radius: 6px;
  background-color: var(--el-bg-color);
  box-shadow: 0 8px 32px #0000000d;
  transition: all 0.2s;

  &::after {
    --scale: 1;
    position: absolute;
    z-index: 1;
    content: '';
    top: 0px;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, calc(var(--n) * 0.4)) scale(var(--scale));
    border-radius: 50%;
    transition: all ease-out 0.3s;
    background-color: var(--el-color-primary);
    width: var(--n);
    height: var(--n);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  }

  &::before {
    --scale: 0.4;
    --n: calc(var(--item-width) * var(--scale));
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%);
    z-index: 2;
    content: '';
    width: var(--n);
    height: 6px;
    border-radius: 999px;
    background-color: var(--el-color-primary);
    transition: all ease-out 0.3s;
    // transition-delay: 0.1s;
  }

  &:hover {
    box-shadow: 0 8px 16px #0000001a;

    .el-icon {
      margin-top: -20%;
    }

    h4 {
      bottom: 50%;
      color: var(--el-bg-color);
    }

    p {
      opacity: 1;
      bottom: 30%;
    }

    .goto {
      opacity: 1;
      bottom: 10%;
    }
  }

  &:hover::after {
    --scale: 6;
  }

  &:hover::before {
    --scale: 0.6;
    bottom: 46%;
    background-color: var(--el-bg-color);
  }

  .el-icon {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 3;
    width: var(--n);
    height: var(--n);
    color: var(--el-bg-color);
    font-size: 40px;
    transition: all ease-out 0.3s;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
    transform: translate(-50%, calc(var(--n) * 0.4));
  }

  h4 {
    position: absolute;
    z-index: 4;
    bottom: 26%;
    left: 0px;
    text-align: center;
    transition: all ease-out 0.3s;
  }

  p {
    position: absolute;
    z-index: 5;
    bottom: 0px;
    left: 0px;
    text-align: center;
    transition: all ease-out 0.3s;
    font-size: 14px;
    opacity: 0;
    color: var(--el-bg-color);
  }

  .goto {
    opacity: 0;
    position: absolute;
    z-index: 6;
    bottom: 10px;
    transition: all ease-out 0.2s;
    transition-delay: 0.1s;
    left: 0px;
    color: var(--el-color-primary-light-9);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      color: var(--el-color-primary-light-7);
    }
  }
}

.system-item.active {
  --item-left: calc((var(--item-total) * var(--item-width) + (var(--item-total) - 1) * var(--gap)) + (var(--item-index) * var(--item-width) + (var(--item-index) - 1) * var(--gap)));
  box-shadow: 0 8px 32px #0000000d,
    0px 0px 0px 9999px rgba(0, 0, 0, 0.2);
  position: relative;
  left: calc(0px - var(--item-left));
  top: -40%;
  z-index: 999;
  // transform: translate(0px, -120%);
}

//-------------样式穿透-------------
</style>
